<template>
  <div class="couple-row">
    <template v-if="node.type === 'couple'">
      <div :class="['person-block', 'husband', { 'step-son': node.husband.adopted }]">
        <div class="person-avatar male">{{ node.husband.name.charAt(0) }}</div>
        <div class="person-name">{{ node.husband.name }}</div>
      </div>
      <div class="couple-connector">❤️</div>
      <div :class="['person-block', 'wife', { 'step-daughter': node.wife.adopted }]">
        <div class="person-avatar female">{{ node.wife.name.charAt(0) }}</div>
        <div class="person-name">{{ node.wife.name }}</div>
      </div>
    </template>
    <template v-else>
      <div :class="['person-block', 'single', { 'step-son': node.person.adopted && node.person.gender === '男', 'step-daughter': node.person.adopted && node.person.gender === '女' }]">
        <div class="person-avatar" :class="node.person.gender === '男' ? 'male' : 'female'">
          {{ node.person.name.charAt(0) }}
        </div>
        <div class="person-name">{{ node.person.name }}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'FamilyCoupleTreeNode',
  props: {
    node: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.couple-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.person-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 80px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.person-block.husband {
  border-color: #1976d2;
}
.person-block.wife {
  border-color: #c2185b;
}
.person-block.single {
  border-color: #888;
}
.person-block.step-son {
  border: 2px dashed #2196f3;
}
.person-block.step-daughter {
  border: 2px dashed #9c27b0;
}
.person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  font-size: 18px;
  margin-bottom: 4px;
}
.person-avatar.male {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
}
.person-avatar.female {
  background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}
.person-name {
  font-size: 14px;
  color: #333;
}
.couple-connector {
  font-size: 20px;
  color: #e91e63;
  margin: 0 8px;
}
</style>